/**
 * Copyright 2018-2020 Streamlit Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "src/assets/css/variables";
@import "src/assets/css/reboot";

// Styles for when the file uploader needs to be compact
// (i.e. mobile or sidebar)  Keeping this in scss since CSS in JS
// for nested component in sidebar is TBD
@mixin compactFileUploader() {
  .stFileUploader {
    .fileUploadDropzone {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .streamlit-button {
        margin-top: $spacer;
      }

      .fileUploaderIcon {
        display: none;
      }
    }

    .uploadedFiles {
      padding-right: $spacer;

      .uploadedFile {
        max-width: inherit;
        flex: 1;
        align-items: flex-start;
        margin-bottom: $spacer/2;
      }
    }

    .uploadedFileName {
      width: 100%;
    }

    .uploadedFileData {
      flex-direction: column;
    }

    .fileError {
      height: auto;
      white-space: initial;

      i {
        display: none;
      }
    }
  }
}

.sidebar {
  @include compactFileUploader();

  .fileUploadDropzone {
    background: $white;
  }
}

@include media-breakpoint-down(sm) {
  @include compactFileUploader();
}

.stFileUploader {
  .uploadedFiles {
    ul {
      list-style-type: none;
      margin: 0;

      li {
        margin: 0;
        padding: 0;
      }
    }

    // The chevrons are padded. Forcing them a bit bigger
    // to work with the surrounding icons
    .streamlit-paginator i {
      font-size: 1.5rem;
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .disabled {
    &,
    small {
      color: $gray;
    }
  }

  .fileError {
    white-space: nowrap;
  }
}
